<template>
  <div class="agreement">
    <!-- 协议管理 agreement-->
    <div class="con">
         <!-- <div class="leftcon">
              <div class="tree-top">
                     <span>本地协议列表</span>
                     <div class="ri-btn">
                        <div style="margin-right:8px">下载到本地</div>
                        <div class="quxiao" >导入文件目录</div>
                        
                     </div>
              </div>
              <div class="mytable">
                    <el-table :data="rightTable" max-height="100%" stripe  style="width: 100%;" >
                          <el-table-column type="selection" width="45" align="center"> </el-table-column>
                                        <el-table-column min-width="120" label="文件名">
                                             <template >
                                                    <div class="mysort">
                                                           <div>协议文件G120.exe</div>
                                                           <div style="color:#999999">408KB</div>
                                                    </div>
                                                </template>
                                         </el-table-column>
                                        <el-table-column prop="remark" width="140" label="修改时间"> </el-table-column>
                                        <el-table-column prop="remark123" width="90" label="当前状态"  align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                          <div style="color:#666666" v-show="row.remark123 == 1">已同步</div>
                                                          <div style="color:#2178F1" v-show="row.remark123 == 2">仅暂存</div>
                                                    </div>
                                                </template>
                                        </el-table-column>
                    </el-table>
              </div>
         </div>
         <div class="middlecon">
              <div class="mybtns" style="margin-top:118px">暂存到管理机 <img src="../../assets/btnImg/you.png" alt=""></div>
              <div class="mybtns" style="margin-top:40px">暂存到本机 <img src="../../assets/btnImg/zuo.png" alt=""></div>
         </div> -->
         <div class="rightcon">
               <div class="tree-top">
                     <span>管理机协议列表</span>
                     <div class="ri-btn">
                        <div @click="openDaorufn">上传协议</div>
                        <input  type="file"   ref="dianfileInput" accept=".dll, .so"  @change="handleFileChange"  style="display: none">
                     </div>
               </div>
                <div class="mytable">
                    <el-table :data="rightTable" height="100%" stripe  style="width: 100%;" >
                          <!-- <el-table-column type="selection" width="45" align="center"> </el-table-column> -->
                           <el-table-column type="index" label="序号" width="60" align="center"> </el-table-column>
                                        <el-table-column  min-width="120" label="协议名称">
                                               <template #default="{row}">
                                                    <div class="mysort">
                                                           <div>{{row.name}}</div>
                                                           <!-- <div style="color:#999999">408KB</div> -->
                                                    </div>
                                                </template>
                                         </el-table-column>
                                        <el-table-column prop="protocol_alias" width="220" label="协议别名"> </el-table-column>
                                        <el-table-column prop="protocol_name" width="360" label="协议文件名"> </el-table-column>
                                        <!-- <el-table-column prop="path" width="140" label="协议路径"> </el-table-column> -->
                                        <el-table-column prop="suffix" width="90" label="协议后缀" align="center"> </el-table-column>
                                        <!-- <el-table-column prop="status" width="90" label="是否可用" align="center">
                                           <template #default="{row}">
                                                    <div class="mysort">
                                                          <div style="color:#2178F1" v-show="row.status == 1">可用</div>
                                                          <div style="color:#666666" v-show="row.status != 1">不可用</div>
                                                    </div>
                                                </template>
                                         </el-table-column>
                                        <el-table-column prop="remark" width="90" label="是否隐藏" align="center"> 
                                           <template #default="{row}">
                                                    <div class="hide">
                                                          <div style="color:#2178F1" v-show="row.hide == 1">可见</div>
                                                          <div style="color:#666666" v-show="row.hide != 1">不可见</div>
                                                    </div>
                                                </template>
                                        </el-table-column> -->
                                        <!-- <el-table-column prop="remark" width="140" label="修改时间"> </el-table-column> -->
                                        <!-- <el-table-column prop="remark123" width="90" label="当前状态"  align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                          <div style="color:#666666" v-show="row.remark123 == 1">已同步</div>
                                                          <div style="color:#2178F1" v-show="row.remark123 == 2">仅暂存</div>
                                                    </div>
                                                </template>
                                        </el-table-column> -->
                                        <el-table-column prop="remark123" width="300" label="操作"  align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                           <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                                <img src="../../assets/btnImg/edit2.png" alt="" style="margin-right:20px" @click="editDioFN(row)">
                                                            </el-tooltip>
                                                             <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                    <img src="../../assets/btnImg/del2.png" alt="" @click="delfn(row)">
                                                            </el-tooltip>
                                                    </div>
                                                </template>
                                        </el-table-column>
                       </el-table>
              </div>

         </div>
    </div>
    <!-- 修改协议 -->
     <el-dialog width="600px" draggable  title="修改协议" :close-on-click-modal='false'
                    v-model="deviceDio">
                    <div style="padding: 40px 20px;">
                        <div class="mydiodiv" >
                            <span class="dioleftname dioleftname1" style="min-width: 85px;">协议名称</span> <el-input v-model="typenameSerial"  />
                        </div>
                        <div class="mydiodiv" style="margin-top:25px;" >
                            <span class="dioleftname dioleftname1" style="min-width: 85px;">协议别名</span> <el-input v-model="protocol_alias"  />
                        </div>
                        <div class="mydiodiv" style="margin-top:25px;">
                            <span class="dioleftname dioleftname1" style="min-width: 85px;">状态</span> 
                             <el-radio v-model="radio" label="1">可见</el-radio>
                              <el-radio v-model="radio" label="0">不可见</el-radio>
                        </div>
                        
                        <!-- <div class="mydiodiv" style="margin-top:16px;">
                            <span class="dioleftname dioleftname1">起始点号</span> <el-input v-model="typename"  /> <span  class="rightname">[偏移量]</span>
                        </div> -->
                      
                    </div>
                    <template #footer>
                                 <div class="dialog-footer">
                                   <el-button  @click="deviceDio = false" >取 消</el-button>
                                  <el-button  class="last-el-button" @click="quedingSerialFN" type="primary">确 定</el-button>
                                 </div>
                    </template>
                </el-dialog>
    <div class="el-loading-mask" v-show="ohdloading">
                        <div class="el-loading-spinner">
                          <svg viewBox="25 25 50 50" class="circular">
                            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                          </svg>
                        </div>
            </div>
  </div>
</template>

<script>
import {protocolManageProtocol,uploadProtocol,delProtocol,editProtocol} from "../../api/Interface";
export default {
 

  data() {
    return {
      rightTable:[],//协议列表
      fileArr:[],//导入目录
      ohdloading:false,
      deviceDio:false,
      typenameSerial:"",
      radio:"1",
      protocol_alias:"",//协议别名
      nowEditRow:{},
    };
  },

  mounted() {
     this.getTableLIst()
  },

  methods: {
     //获取协议列表
     getTableLIst(){
      this.ohdloading = true
      protocolManageProtocol().then(res => {
        this.ohdloading = false
          // console.log("获取协议列表",res);
          this.rightTable = res
      }).catch(() => {
            // ...
             this.ohdloading = false
          });
     },
      openDaorufn(){
        this.$refs.dianfileInput.click();
      },
    //上传文件
        handleFileChange(event) {   
           const files = event.target.files;
          if(files.length == 0){
            return
          }
           let formData = new FormData()
            formData.append('file',files[0]);
          
            this.ohdloading = true
            uploadProtocol(formData).then(res => {
                // console.log("上传协议",res);
                this.ohdloading = false
                this.$refs.dianfileInput.value = '';
                if(res.code == '200'){
                   this.getTableLIst()
                    this.$message({showClose: true,message: '上传成功',type: 'success'});
                }else {
                   this.$message.error('上传失败')
                }
            }).catch(() => {
              this.$message.error('上传失败');
                this.ohdloading = false
              });
           
        },
        //修改协议
        editDioFN(data){
           this.nowEditRow = data
           this.typenameSerial = data.name
           this.protocol_alias = data.protocol_alias
           this.radio = String(data.status)
           this.deviceDio = true
        },
        //确定修改
        quedingSerialFN(){
          //  console.log("this.nowEditRow",this.nowEditRow);
            var d = {
                "id": Number(this.nowEditRow.id),
                "name": this.typenameSerial,
                "protocol_name": this.nowEditRow.protocol_name,
                "path": "",
                "suffix": this.nowEditRow.suffix,
                'protocol_alias':this.protocol_alias,
                "status": Number(this.radio),
                "hide": Number(this.nowEditRow.hide)
            }
            this.ohdloading = true
            // console.log("参数",d);
            editProtocol(d).then(res => {
                // console.log("修改协议",res);
                this.ohdloading = false
                 if(res != undefined){
                  this.deviceDio = false
                     this.$message({showClose: true,message: '修改成功',type: 'success'});
                       this.getTableLIst()
                  }else {
                      this.$message.error('修改失败');
                  }
            }).catch(() => {
              this.$message.error('修改失败');
                this.ohdloading = false
              });
        },
        //删除协议
        delfn(row){
            this.$confirm(`此操作会删除 ${row.name}，确定要继续吗？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => { 
             this.ohdloading = true
              delProtocol(row.id).then(res => {
                 this.ohdloading = false
                  if(res != undefined){
                     this.$message({showClose: true,message: '删除成功',type: 'success'});
                       this.getTableLIst()
                  }else {
                      this.$message.error('删除失败');
                  }
              })
          }).catch(() => {
            // ...
          });
        }
  },
};
</script>
<style lang="scss" scoped>
    .agreement {
          width: 100%;
          height: 100%;
          position: relative;
          .con {
             width: 100%;
             height: 100%;
             background-color: #fff;
             padding: 0px 12px ;
             box-sizing: border-box;
             display: flex;
             .tree-top {
                margin: 12px 0px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 12px;
                    color: #666666;
                }
                .ri-btn {
                    display: flex;

                    div {
                        padding: 6px 8px;
                        border-radius: 4px;
                        background-color: #2178F1;
                        color: #fff;
                        font-size: 12px;
                        cursor: pointer;
                    }
                    .quxiao {
                         border: 1px solid #2178F1;
                         color: #2178F1;
                         background-color: #E7F0FF;
                    }
                }


               }
            
             .leftcon {
                 width: calc(50% - 86px);
                 height: 100%;
             }
             .middlecon {
                  width: 148px;
                  height: 100%;
                  border-left: 1px solid #E6E6E6;
                  border-right: 1px solid #E6E6E6;
                  margin: 0px 12px;
                  .mybtns {
                     width: 108px;
                     height: 28px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     font-size: 12px;
                     color: #2178F1;
                     border: 1px solid #2178F1;
                     box-sizing: border-box;
                     border-radius: 4px;
                     margin-left: 20px;
                     img {
                         margin-left: 4px;
                     }
                  }
             }
             .rightcon {
                  width: 100%;
                  // width: calc(50% - 86px);
                 height: 100%;
             }
             .mytable {
                 width: 100%;
                 height: calc(100% - 60px);
             }
          }
    }
    :deep(.el-dialog__header) {
     border-bottom: 1px solid #E6E6E6;
}
:deep(.el-dialog__footer) {
   border-top: 1px solid #E6E6E6;
}
:deep(.el-radio ){
    position: relative;
    top: 1px;
}
:deep(.el-dialog__body) {
         padding: 20px;
}
.quxiao {
                        //  margin-left: 8px;
                         color: #666666;
                         background-color: #fff;
                         border: 1px solid #cccccc;
}
.mydiodiv {
     display: flex;
     align-items: center;
     .dioleftname {
         white-space: nowrap;
         margin-right: 8px;
         font-size: 14px;
         color: #666666;
     }
     .rightname {
         white-space: nowrap;
         color: #666666;
         margin-left:8px
     }
     .dioleftname1 {
        width: 55px;
        text-align: right;
     }
}
</style>